<template>
	<div>
		<el-form ref='formQuery' :model='queryParams' inline size='mini'>
			<el-form-item prop='channel_id' style='max-width:150px'>
				<el-input v-model='queryParams.channel_id' placeholder='渠道商' clearable prefix-icon="el-icon-search" ></el-input>
			</el-form-item>
			<el-form-item prop='url' style='max-width:150px'>
				<el-input v-model='queryParams.url' placeholder='节点' clearable prefix-icon="el-icon-search" ></el-input>
			</el-form-item>
			<el-form-item prop='ip' style='max-width:150px'>
				<el-input v-model='queryParams.ip' placeholder='IP查询' clearable prefix-icon="el-icon-search" ></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type='primary' @click='query'>查询</el-button>
				<el-button @click='resetQuery'>重置</el-button>
			</el-form-item>
		</el-form>
		<el-table
			:data='list'
			ref='tableList'
			border='border'
			size="mini"
			v-loading='loading'
			stripe
		>
			<el-table-column type='index'></el-table-column>
			<el-table-column prop='ip' label='登录IP' min-width='200'></el-table-column>
			<el-table-column prop='channel_id' label='用户标识' min-width='200'></el-table-column>
			<el-table-column prop='url' label='节点' width='200' show-overflow-tooltip></el-table-column>
			<el-table-column prop='code' label='返回码' min-width='100'></el-table-column>
			<el-table-column prop='msg' label='返回说明' min-width='200'></el-table-column>
			<el-table-column prop='request_time' label='请求时间' min-width='200'></el-table-column>
			<el-table-column  label='操作' fixed='right' align='center' width='100'>
				<template slot-scope="{row}">
					<el-button  size='mini' type='primary'  @click='showDetail(row)'>详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style='margin-top: 10px'
      :page-sizes = "[10, 20, 50, 100]"
      :page-size= "requestParams.limit"
      :current-page.sync = "requestParams.currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataTotal"
      @size-change='sizeChange'
      @current-change='getData'
      >
    </el-pagination>
		<detailDialog :in-dialog='inDialog' ref='detailDialog'/>
	</div>
</template>
<script>
	import logApi       from '@/api/api/log'
	import detailDialog from "@/components/api/log/detailDialog"
	export default {
		components:{
			detailDialog
		},
		props:{
			border:{
				type:Boolean,
				value:true
			},
			inDialog: {
				type: Boolean,
				default: false
			},
		},
		data:()=>({
			loading:false,
			list:[],
			unreadTotal:0,
			dataTotal:0,
			queryParams:{
				ip:''
			},
			requestParams:{
				pageSize:10,
				currentPage:1
			}
		}),
		created(){
			 console.log("createdcreatedcreatedcreated")
			this.getData()
		},
		methods:{
			getData(){
				this.loading = true
				logApi.getList(this.requestParams).then(res=>{
					this.list = res.data.data
					this.dataTotal = res.data.total
					this.loading = false
				})
			},
			sizeChange(value){
				this.requestParams.pageSize=value
				this.getData()
			},
			query(){
				this.requestParams = Object.assign({},this.requestParams,this.queryParams)
				this.getData()
			},
			resetQuery(){
				this.$refs.formQuery.resetFields()
				this.query()
			},
			showDetail(row){
				this.$refs.detailDialog.open().then(that=>{
					that.initData(row)
				})
			},
		}
	}
</script>
